Status barを作る | scrapVim
実装
View
見た目は各人が自由に変えられるようにする
とりあえず今考えている見た目
scrapboxのheaderの下に表示する
ページ下部だと見にくい
<div>で組むのが妥当か
<nav>はもう使っているし、<header>はなにか違う
position: stickyで固定できる
表示する情報
mode
入力中のkey
カーソルの行数と列数
code:status-bar.html
<div id="scrapvim-status-bar" class="vim-status-bar">
<div class="mode-viewer">
</div>
<div class="command-viewer">
</div>
</div>
code:status-bar.css
.vim-status-bar {
position: sticky;
margin-top: 0px;
margin-bottom: 0px;
display: flex;
}
.vim-status-bar .mode-viewer {
display: block;
flex-shrink: 4;
}
.vim-status-bar .mode-viewer {
display: block;
flex-shrink: 4;
}
code:statusBar.js
export class StatusBar {
constructor() {}
render() {
const statusBar = document.getElementById('scrapvim-status-bar') ??
}
}
scrapboxのheaderを真似てみよう
Model
Status barに出す情報を取得できるpropertyを用意する
とりあえず表示したい情報
cursorの位置
入力したキー
現在のmode